<template>
    <!-- html -->
    <div class="Readonly_shallowReadonly">
        <h2>Readonly_shallowReadonly</h2>
        <h4>{{ sum1 }}</h4>
        <h4>{{ sum2 }}</h4>
        <h4>车：{{ car2 }}</h4>
        <button @click="cyhangeSum1">点我sum1+1</button>
        <button @click="cyhangeSum2">点我sum2+1</button>
        <button @click="changeColor">修改car2颜色</button>
        <button @click="changeBard">修改car2品牌</button>
        <button @click="changeCar">修改车</button>
        <button @click="changeBand">修改发动机</button>
    </div>
</template>
<script lang="ts" setup name="Readonly_shallowReadonly">
import { options } from 'node_modules/axios/index.d.cts'
import { ref, readonly, shallowReadonly, reactive } from 'vue'
//readonly 用于创建一个对象的深只读副本
//shallowReadonly 与readonly类似，但只作用于对象的顶层属性

let sum1 = ref(0)
//sum2 是不能修改的 对象的深只读副本,不可更改
let sum2 = readonly(sum1)  

let car1 = reactive({ bard: "奔驰", color: "红色", options: { band: "发动机" } })
//对象的深只读副本,不可更改
// let car2 = readonly(car1)
//浅层次只读，深层次的可更改
let car2 = shallowReadonly(car1)

function cyhangeSum1() {
    sum1.value += 1
}
function cyhangeSum2() {
    sum2.value += 1
}


function changeColor() {
    car2.bard = "宝马"
}
function changeBard() {
    car2.color = "黑色"
}


function changeBand() {
    car2.options.band += "s"
}

function changeCar() {
    Object.assign(car2, { bard: "宝马", color: "黑色" })
}

</script>

<style scoped>
/* 样式 */
.Readonly_shallowReadonly {
    background-color: #ddd;
    border-radius: 10px;
    padding: 20px;
}
</style>